<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />
    <link rel="stylesheet" type="text/css" href="../../dist/css/form/control.css" />

    <link crossorigin="anonymous" integrity="sha384-FckWOBo7yuyMS7In0aXZ0aoVvnInlnFMwCv77x9sZpFgOonQgnBj1uLwenWVtsEj"
        href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>表单布局与验证器 Form Layout and Validator</h2>
                <p></p>

                <form action="?" method="POST" class="aj-form">
                    <dl>
                        <label>
                            <dt>
                                用户名：<span class="required-note">*</span>
                            </dt>
                            <dd>
                                <input type="text" name="username" placeholder="用户名" required data-regexp="Username"
                                    data-note="用户名等于账号名；不能与现有的账号名相同；注册后不能修改；"
                                    data-note2="用户名22等于账号名；不能与现有的账号名相同；注册后不能修改；" />
                            </dd>
                        </label>


                        <label>
                            <dt>
                                电子邮件：<span class="required-note">*</span>
                            </dt>
                            <dd>
                                <input type="text" name="username" placeholder="请输入电子邮件" data-regexp="email"
                                    data-note="邮件可用于登录和查找密码等；不能与现有的邮件相同；注册后可以修改；" data-note2="推荐使用国内邮箱，如 QQ、163 等的邮箱" />
                            </dd>
                        </label>

                        <label>
                            <dt>
                                用户头像：<span class="required-note">*</span>
                            </dt>
                            <dd>
                                <img id="preview" /> <input type="file" name="avatar"
                                    onchange="onAvatartUploadChange(this);" placeholder="请输入电子邮件" data-regexp="email"
                                    data-note="邮件可用于登录和查找密码等；不能与现有的邮件相同；注册后可以修改；" data-note2="推荐使用国内邮箱，如 QQ、163 等的邮箱" />
                            </dd>
                        </label>



                        <label>
                            <dt
                                style="overflow: hidden; vertical-align: middle; display: table-cell; height: 100px; line-height: 100px;">
                                个人简介
                                :</dt>
                            <dd>
                                <textarea style="width: 100%; height: 100px; resize: none;"></textarea>
                            </dd>
                        </label>


                        <dt>性别：</dt>
                        <dd>
                            <label><input type="radio" value="" name="sex" checked="checked" /> 男</label> <label><input
                                    type="radio" value="" name="sex" /> 女</label>
                        </dd>

                        <dt>爱好：</dt>
                        <dd>
                            <label><input type="checkbox" /> 篮球</label> <label><input type="checkbox" /> 足球</label>
                            <label><input type="checkbox" /> 游泳</label>
                        </dd>

                        <dt>城市</dt>
                        <dd>
                            <select>
                                <option>北京</option>
                                <option>上海</option>
                                <option>南京</option>
                            </select>
                        </dd>

                        <label>
                            <dt>
                                <span class="required-note">*</span>登录密码 :
                            </dt>
                            <dd>
                                <input type="password" name="password" />
                            </dd>
                        </label>


                        <label>
                            <dt>
                                <span class="required-note">*</span>确认密码 :
                            </dt>
                            <dd>
                                <input type="password" name="password" />
                            </dd>
                        </label>

                        <!-- 验证码 -->
                        <label class="captchaCode">
                            <dt>
                                <span class="required-note">*</span>验证码：
                            </dt>
                            <dd>
                                <input type="text" data-regexp="integer" required />
                            </dd>
                        </label>
                        <label>
                            <dt>&nbsp;</dt>
                            <dd>
                                <input name="agree" type="checkbox" /> 我已仔细阅读并接受<a href="misc/registration-policy.jsp"
                                    target="_blank">注册条款</a>
                            </dd>
                        </label>
                        <dt>&nbsp;</dt>
                        <dd>
                            <input type="submit" value="注 册" /> &nbsp;&nbsp;&nbsp;&nbsp;<a href="?">现有账号登录</a>
                        </dd>
                    </dl>
                </form>
            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
</body>

</html>